<template lang="pug">
.menus-ovvi(v-if="getMenusData && getMenusData.length")

  .scroll-wrap(v-scroll.x='' style='display: flex;')
    .tab-item(
      v-for='(item, index) in getMenusData',
      :key='index',
      @click.stop='openitem(item, index)'
    )
      van-icon.tab-item-icon(name="bars" color="#ffffff" size="18")
      span {{item.name}}

</template>

<script>
import { mapGetters } from 'vuex'
import { DeepCloneData, sortId } from '@/utils'

export default {
  data() {
    return {
      active: 0,
    }
  },
  computed: {
    ...mapGetters(['ovvData', 'handdrawData']),
    getMenusData() {
      if (this.ovvData && this.ovvData.overview_menu_items) {
        let optionsArr = this.ovvData.overview_menu_items.menus
        if (!optionsArr) {
          // 空数据返回
          return []
        }
        return optionsArr
      } else if (this.handdrawData && this.handdrawData.overview_menu_items) {
        let optionsArr = this.handdrawData.overview_menu_items.menus
        if (!optionsArr) {
          // 空数据返回
          return []
        }
        return optionsArr
      } else {
        return []
      }
    }
  },
  methods: {
    // 展开菜单弹框
    openitem(item) {
      // console.log(item)
      if (!item) return
      let contents = [], obj = []
      let tempItem = DeepCloneData(item)
      if (tempItem.children && tempItem.children.length > 0) {
        tempItem.children.map(temp => {
          if (temp.contents) {
            contents = JSON.parse(temp.contents)
            if (contents.length > 0) {
              contents.sort(sortId)
            }
          }
          temp.newData = contents
          temp.title = temp.name
        })
        obj = tempItem.children
      } else {
        if (tempItem.contents) {
          contents = JSON.parse(tempItem.contents)
          if (contents.length > 0) {
            contents.sort(sortId)
          }
        }
        tempItem.newData = contents
        tempItem.title = tempItem.name
        obj = [tempItem]
      }
      // console.log(obj)

      this.$vgo.emit('dialog:mutil', {
        data: obj,
        biaoji: 1,
      })
    }
  }
}
</script>

<style lang="stylus">
.menus-ovvi
  position absolute !important
  top 0
  left 0
  height 40px
  width calc(100% - 50px)
  overflow hidden
  background-color rgba(0,0,0,0)
  z-index 102
  .scroll-wrap
    display flex
    height 40px
    flex-direction row-reverse
    .tab-item
      cursor pointer
      height 40px
      line-height 40px
      padding 0 5px
      text-align center
      overflow hidden
      .tab-item-icon
        vertical-align sub
      span
        font-size 15px
        color #fff

  // .menusovv-wrap
  //   width 100%
  //   .menusovv-content
  //     height 40px
  //     float right
  //     .menusovv-item
  //       cursor pointer
  //       height 40px
  //       display inline-block
  //       width 90px
  //       // background-color rgba(0,0,0,0.1)
  //       line-height 40px
  //       padding 0 5px
  //       text-align center
  //       overflow hidden
  //       text-overflow ellipsis
  //       white-space nowrap
  //       .menusovv-item-icon
  //         vertical-align sub
  //       span
  //         font-size 15px
  //         color #fff
</style>